{% extends "_layouts/examples.html" %}
{% block title %}Margin collapse{% endblock %}

{% block content %}
<div class="p-card u-no-margin">
  This div has no margin
</div>
<div class="p-card u-no-margin--top">
  This div has no top margin
</div>
<div class="p-card u-no-margin--right">
  This div has no right margin
</div>
<div class="p-card u-no-margin--bottom">
  This div has no bottom margin
</div>
<div class="p-card u-no-margin--left">
  This div has no left margin
</div>
<h1 class="u-no-margin--bottom">&lt;h1&gt; heading with u-no-margin--bottom</h1>
<hr />
<h2 class="u-no-margin--bottom">&lt;h2&gt; heading with u-no-margin--bottom</h2>
<hr />
<h3 class="u-no-margin--bottom">&lt;h3&gt; heading with u-no-margin--bottom</h3>
<hr />
<h4 class="u-no-margin--bottom">&lt;h4&gt; heading with u-no-margin--bottom</h4>
<hr />
<h5 class="u-no-margin--bottom">&lt;h5&gt; heading with u-no-margin--bottom</h5>
<hr />
<h6 class="u-no-margin--bottom">&lt;h6&gt; heading with u-no-margin--bottom</h6>
<hr />
<p class="u-no-margin--bottom">&lt;p&gt; with u-no-margin--bottom</p>
<hr />
<p class="p-muted-heading u-no-margin--bottom">&lt;p&gt; p-muted-heading with u-no-margin--bottom</p>
<hr />
<p class="p-text--default u-no-margin--bottom">&lt;p&gt; p-text--default with u-no-margin--bottom</p>
<hr />
<p class="p-text--small u-no-margin--bottom">&lt;p&gt; small-text with u-no-margin--bottom</p>
{% endblock %}
